<template>
  <el-container>
    <el-header style="background-color: white;color: #000000;">
      <h1 align="center">订单明细</h1>

    </el-header>
    <el-main>
      <!-- 行内表单 -->
      <el-form :model="queryParam" :inline="true" class="demo-form-inline" label-width="100px">
        <el-form-item label="用户账号">
          <el-input v-model="queryParam.uid"></el-input>
        </el-form-item>

        <el-form-item label="菜品名称">
          <el-input v-model="queryParam.dishName"></el-input>
        </el-form-item>

        <el-form-item label="套餐名称">
          <el-select v-model="queryParam.mealsName">
            <el-option value="" label="----请选择套餐----"></el-option>
            <el-option value="至尊豪华套餐" label="至尊豪华套餐"></el-option>
            <el-option value="尊享套餐" label="尊享套餐"></el-option>
            <el-option value="豪华套餐" label="豪华套餐"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="queryByPage()">查询</el-button>
          <el-button type="success" size="mini" @click="add()">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格组件 -->
      <el-table :data="list" style="width: 100%;">
        <!-- 列表签 -->
        <el-table-column prop="oid" label="订单编号" width="100px"></el-table-column>
        <el-table-column prop="uid" label="用户账号" width="100px"></el-table-column>
        <el-table-column prop="dishName" label="菜品名称" width="200px"></el-table-column>
        <el-table-column prop="mealsName" label="套餐名称" width="200px"></el-table-column>
        <el-table-column prop="total" label="价格" width="100px"></el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="200px"></el-table-column>
        <el-table-column prop="address" label="收餐地址" width="200px"></el-table-column>
        <el-table-column prop="orderState" label="订单状态" width="100px">
          <template v-slot="scope">
                <p v-if="scope.row.orderState=='0'">未完成</p>
                <p v-if="scope.row.orderState=='1'">已完成</p>
          </template>

        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="show(scope.row.oid)">详情</el-button>
            <el-button type="danger" size="mini" @click="update(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.oid)">删除</el-button>

          </template>
        </el-table-column>

      </el-table>
      <div class="block">
        <!-- size-change: 下拉框选中事件触发的函数；-->
        <!-- current-change：页码、上一页和下一页触发的事件 -->
        <!-- current-page： 当前页的页码 -->
        <!-- page-sizes：下拉框选中行数的集合 -->
        <!-- page-size：每页显示条数 -->
        <!--layout：分页页面布局 -->
        <!-- total：总条数 -->

        <el-pagination @size-change="sc" @current-change="cc" :current-page="queryParam.page"
          :page-sizes="[5, 10, 20, 30]" :page-size="queryParam.row" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!-- 对话框 -->
      <el-dialog :title="title" :visible.sync="isShow" width="50%">
        <!-- 表单组件 -->
        <el-form :model="formData" label-width="100px">

          <el-form-item label="用户账号">
            <el-input v-model="formData.uid" :disabled="isDisable"></el-input>
          </el-form-item>
          <el-form-item label="菜品名称">
            <el-input v-model="formData.dishName"></el-input>
          </el-form-item>
          <el-form-item label="套餐名称">
            <el-select v-model="formData.mealsName" clearable placeholder="请选择" >

              <el-option value="至尊豪华套餐" label="至尊豪华套餐"></el-option>
              <el-option value="尊享套餐" label="尊享套餐"></el-option>
              <el-option value="豪华套餐" label="豪华套餐"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="formData.total"></el-input>
          </el-form-item>
          <el-form-item label="收餐地址">
            <el-input v-model="formData.address"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="formData.orderState" >
              <el-option value="0" label="未完成"></el-option>
              <el-option value="1" label="已完成"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="success" size="mini" @click="save()">保存</el-button>
          <el-button type="primary" size="mini" @click="black()">取消</el-button>
          </el-form-item>

        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "orderManager",
    data() {
      return {
        title: "修改", //对话框标题
        isDisable: true, //是禁用input组件
        isShow: false, //控制对话框是否显示
        list: [], //当前页面集合
        total: 0, //总条数
        totalPage: "", //总页数
        queryParam: { //查询参数
          page: 1,
          row: 5,
          uid: "",
          dishName: "",
          mealsName: ""

        },
        qs: [], //答案数组
        formData: { //表单数据
          oid: "",
          uid: "",
          dishName: "",
          mealsName: "",
          total: "",
          createTime: null,
          address: "",
          orderState: ""


        },

      }

    },
    methods: { //查询分页
      queryByPage() {
        var self = this;
        this.$http.get("/order/queryAllOrder", {
          params: this.queryParam
        }).then(function(rs) {
          console.log(rs.data.data.list);
          if (rs.data.success) {
            //赋值当前页
            self.list = rs.data.data.list;

            //赋值总条数
            self.total = rs.data.data.total;
            //赋值总页数
            self.totalPage = rs.data.data.totalPage;


          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },
      sc(row) { //下拉框触发
        this.queryParam.row = row;
        //刷新
        this.queryByPage();
      },

      cc(page) { //页码触发事件
        this.queryParam.page = page;
        //刷新
        this.queryByPage();
      },

      show(row) {
        console.log(row);
        this.$router.push({
          "name": "ex",
          query: {
            "oid": row
          }
        });


      },
      update(row) { //修改
        //显示对话框
        this.isShow = true;
        //更改标题
        this.title = "修改";

        //数据回显
        this.formData = row;

        console.log(row);
      },
      add() { //打开一个新的窗口
        this.isShow = true;
        //更改标题
        this.title = "新增";
        //对数据进行修改
        this.isDisable = false;
        //清空表单
        this.formData = {};
        this.qs = [];

      },
      save() { //保存
        var url = "";
        if (this.title == "新增") {
          url = "/order/addOrder";

        } else {
          url = "/order/updateOrder";
        }

        var self = this;
        this.$http.get(url, {
          params: this.formData,
        }).then(function(rs) {
          self.$message(rs.data.data);
          if (rs.data.success == true) {
            //关闭对话框
            self.isShow = false;
            //刷新
            self.queryByPage();
            //禁用
            self.isDisable = true;
            //后端消息提示
            console.log(rs.data.info);

          }else{
            //后端消息提示
            console.log(rs.data.info);
            self.$alert(rs.data.info);
          }

        }).catch(function(rs) {
          console.log(rs);

          self.$message("服务器连接错误");
        })
      },
      black() {
        //关闭对话框
        this.isShow = false;
        //



      },
      del(row) {

        var self = this;
        this.$http.get("/order/delOrderByOid", {
          params: {
            "oid": row
          },
        }).then(function(rs) {
          self.$message(rs.data.info);
          if (rs.data.success) {

            //刷新
            self.queryByPage();

          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },



    },
    mounted() {
      this.queryByPage();
    }

  }
</script>

<style>
</style>
